<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- --------------------------头部------------------------- -->
        <el-row type="flex" justify="space-between">
          <el-col :span="22">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="学科名称" style="margin-left: 10px">
                <el-input v-model="formInline.user" size="small"></el-input>
              </el-form-item>

              <el-form-item>
                <template #default>
                  <el-button size="small" @click="obliterate">清除</el-button>
                  <el-button size="small" type="primary" @click="onSubmit"
                    >搜索</el-button
                  >
                </template>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="2">
            <el-button type="success" size="small" icon="el-icon-edit" @click="HandleAdd"
              >新增学科</el-button
            >
          </el-col>
        </el-row>
        <!--------------------------- 警告栏 ---------------------------->
        <el-alert :closable="false" :title=title type="info" show-icon>
        </el-alert>

        <!-- --------------------------表格----------------------- -->
        <el-table
          :data="SubjectList"
          style="margin-top:20px ;width: 100%"
          size="medium"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column label="序号" prop="id" width="50" type="index">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" >
          </el-table-column>
          <el-table-column prop="username" label="创建者" >
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="180" :formatter="fileCreatedDate">
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            :formatter="showDept"
          >
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
          >
          </el-table-column>
          <el-table-column prop="tags" label="标签" >
          </el-table-column>
          <el-table-column prop="totals" label="题目数量" >
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template #default="{row}">
              <el-button type="text" @click="HandleClassify(row)">学科分类</el-button>
              <el-button type="text" @click="HandleTag(row)">学科标签</el-button>
              <el-button type="text" @click="HandleChange(row)">修改</el-button>
              <el-button type="text" @click="HandelDel(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- -----------------------分页--------------------------- -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="->,prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>

      <SubjectsAdd :isShow.sync="isShow" @add-handel="AddHandle" ref="subjectsadd" :List="List"></SubjectsAdd>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, detail, remove } from '@/api/hmmm/subjects.js'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  name: 'Subjects',
  components: {
    SubjectsAdd
  },
  data () {
    return {
      // 搜索栏
      formInline: {
        user: ''
      },
      // 数据列表
      SubjectList: [
        {
          id: '1', // 编号
          subjectName: '大数据', // 学科名称
          username: '超级管理员', // 创建者
          addDate: '', // 创建日期
          isFrontDisplay: '是', // 前台是否显示
          twoLevelDirectory: '4', // 二级目录
          tags: '7', // 标签
          totals: '0', // 题目数量
          counts: '' // 总记录数

        }
      ],
      page: 1, // 当前页数
      pagesize: 10, // 页尺寸
      total: 0, // 总数量
      isShow: false, // 添加按钮弹框
      List: []// 完整数据列表
    }
  },
  created () {
    this.getSubjectList()
  },
  computed: {
    title () {
      return '数据一共' + this.total + '条'
    }

  },
  methods: {
    // 搜索按钮
    async onSubmit () {
      if (this.formInline.user) {
        const obj = this.List.filter(item => item.subjectName.indexOf(this.formInline.user) !== -1)
        // console.log(obj)
        // const res = await detail(...obj)
        // console.log(res)
        // this.SubjectList = [res.data]
        this.SubjectList = [...obj]
        // console.log(this.SubjectList)
        this.total = this.SubjectList.length
      } else {
        this.getSubjectList()
      }
    },
    // 清除
    obliterate () {
      this.formInline.user = ''
    },
    // 改变页码时触发
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getSubjectList({ page: val, pagesize: this.pagesize, subjectName: this.SubjectList.subjectName })
    },
    // 每页条数改变时触发
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.page = 1
      this.getSubjectList({ page: this.page, pagesize: val, subjectName: this.SubjectList.subjectName })
    },
    // 数据渲染
    async getSubjectList (value) {
      const { data } = await list(value)
      // console.log(data.items)
      this.SubjectList = data.items
      this.total = data.counts
      // this.page = data.page
      // this.pagesize = data.pagesize
      // 获取完整数据列表
      const { data: { items } } = await list({ pagesize: this.total })
      // console.log(items)
      this.List = items
    },

    // 自定义前台是否显示内容
    showDept (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      if (cellValue === 1) {
        return '是'
      } else {
        return '否'
      }
    },
    // 自定义时间格式
    fileCreatedDate (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // if (cellValue) {
      //   return cellValue
      // }
      // const date1 = cellValue.slice(0, 10)
      // const date2 = cellValue.slice(11, 19)
      // const date3 = date1 + ' ' + date2
      // return date3
      return dayjs(cellValue).format('YYYY-MM-DD- HH:mm:ss')
    },
    // 新增学科
    HandleAdd () {
      this.isShow = true
    },
    // 添加成功
    AddHandle () {
      this.getSubjectList()
      this.page = 1
    },
    // 删除学科
    async HandelDel (row) {
      this.$confirm('此操作将永久删除该学科，是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        this.getSubjectList()
      })
    },
    // 修改
    async HandleChange (row) {
      this.isShow = true
      const { data } = await detail(row)
      // console.log(data)
      this.$refs.subjectsadd.ruleForm = data
    },
    // 学科分类
    HandleClassify (row) {
      // console.log(row)
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 学科标签
    HandleTag (row) {
      // console.log(row)
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  padding: 10px;
}
</style>
